<template>
  <zm-view ref="view">
    <map :style="{ width: '100vw', height: `calc(100vh - ${footerHeight}px)` }" :latitude="latitude" :longitude="longitude" :markers="markers"> </map>
    <view class="footer-wrap">
      <text class="font-32 font-bold">{{ name }}</text>
      <text class="font-26 text-999 mt-8">{{ address }}</text>
      <zm-button size="large" :icon="useImage('/zuimei-film-oss/1.0.0/icons/map-path.png')" icon-size="36rpx" custom-class="mt-20" @click="handleNavigation">到这里去</zm-button>
    </view>
  </zm-view>
</template>

<script>
import page from "@/mixins/page"
import hook from "@/mixins/hook"
export default {
  mixins: [page, hook],
  data() {
    return {
      name: "",
      title: "",
      address: "",
      latitude: 0,
      longitude: 0,
      markerTitle: "",
      markers: [],
      footerHeight: 0
    }
  },
  computed: {},
  onLoad(options) {
    this.name = options.name
    this.title = options.title
    this.address = options.address
    this.latitude = options.latitude
    this.longitude = options.longitude
    this.markerTitle = options.markerTitle
    uni.setNavigationBarTitle({ title: this.title })

    // 标记点
    this.markers = [
      {
        id: 1,
        width: 20,
        height: 20,
        title: this.markerTitle,
        latitude: this.latitude,
        longitude: this.longitude,
        iconPath: "/static/icons/location.png"
      }
    ]

    this.resize()
  },
  methods: {
    async resize() {
      await this.$nextTick()
      const rect = await this.useRect(".footer-wrap")
      if (rect) this.footerHeight = rect.height
    },
    handleNavigation() {
      uni.openLocation({
        name: this.name,
        address: this.address,
        latitude: +this.latitude,
        longitude: +this.longitude,
        success: () => {},
        fail: () => {}
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.footer-wrap {
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  position: fixed;
  overflow: hidden;
  position: relative;
  padding: 30rpx 24rpx;
  flex-direction: column;
  background-color: #fff;
  border-radius: 24rpx 24rpx 0rpx 0rpx;
}
</style>
